feat: auto-switch to imported mode after successful import #8521
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Fixes [RooCodeInc#8239](RooCodeInc#8239) ## Summary Automatically switches to the imported mode after a successful mode import, providing immediate feedback and eliminating the need for manual mode selection. ## Changes ### Backend (CustomModesManager.ts) - Modified `importModeWithRules()` to return the imported mode's slug in the result - Returns `{ success: true, slug: importData.customModes[0]?.slug }` on success - Enables the UI to know which mode was imported for automatic switching ### Message Handler (webviewMessageHandler.ts) - Updated `importMode` case to handle the new slug return value - Passes the slug to the webview via `importModeResult` message - Maintains backward compatibility with existing error handling ### UI (ModesView.tsx) - Added auto-switch logic in `importModeResult` message handler - Attempts to find imported mode in fresh customModes list - Falls back to direct slug-based switch if mode not yet in list - Updates visual mode state for immediate UI feedback - Only switches on success with a valid slug provided ### Tests (ModesView.import-switch.spec.tsx) - Added new test suite for import auto-switch behavior - Tests successful switch when slug is provided - Tests no-switch behavior on import failure or missing slug - Verifies both backend message and UI state updates ## Testing - New test coverage added for auto-switch scenarios - Existing import/export functionality remains unchanged - Works with both global and project-level imports
dosubot
bot
added
size:L
hannesrudolph
added
the
Issue/PR - Triage
…tener Use a stable ref to hold the latest switchMode and avoid capturing it in the window "message" listener closure: Add a switchModeRef updated via useEffect; call switchModeRef.current in the importModeResult fallback instead of switchMode Mirrors existing handleModeSwitchRef/customModesRef pattern to keep handler stable while accessing fresh values Prevents re-registration churn and removes the ESLint warning with no runtime behavior change File touched: webview-ui/src/components/modes/ModesView.tsx Why: The effect that registers the window event listener intentionally has an empty dependency array; directly referencing switchMode violates react-hooks/exhaustive-deps. Using a ref decouples the effect from function identity changes while preserving up-to-date behavior.
![roomote[bot]](https://avatars.githubusercontent.com/in/1546624?s=60&v=4){kind=small}
|
|
||
| return { success: true } | ||
| // Return the imported mode's slug so the UI can activate it | ||
| return { success: true, slug: importData.customModes[0]?.slug } |
There was a problem hiding this comment.
[P2] Multi-mode import behavior: this returns only the first imported mode's slug (customModes[0]). If a YAML contains multiple modes, the UI will switch to the first only. Either (a) validate single-mode imports and surface a clear error, or (b) return a list of slugs (or the last processed slug) and adapt the UI to a defined behavior.
There was a problem hiding this comment.
What behavior do we want from Roo when the user imports a modes.yaml file containing multiple modes? Personally I think auto-selecting the first mode from the list is fine (this is the current behavior in my implementation).
Type safety for slug Co-authored-by: roomote[bot] <219738659+roomote[bot]@users.noreply.github.com>
…rt success updateCustomMode() was catching and swallowing all errors, causing importModeWithRules() to return success even when mode persistence failed. This led to auto-switch attempting to activate modes that never persisted.
…rt' of https://github.com/heyseth/Roo-Code into feat/auto-switch-to-imported-mode-after-successful-import
Moves type declaration out of event handler to prevent redeclaration on every message event.
…ejections while allowing importModeWithRules to detect persistence failures
webview-ui/src/components/modes/__tests__/ModesView.import-switch.spec.tsx
Show resolved
Hide resolved
…issues - Use parseYamlSafely() in importModeWithRules for consistent YAML parsing across the codebase, ensuring BOM stripping and character cleaning - Sync visualMode with context.mode to prevent UI desync when modes are switched programmatically from outside the component - Add test coverage for fallback branch when imported mode slug is not yet present in customModes state Fixes parser inconsistency (P2), visualMode desync risk (P3), and missing test coverage (P3) identified in code review.
6 tasks
hannesrudolph
added
PR - Needs Preliminary Review
and removed
Issue/PR - Triage
daniel-lxs
added a commit
that referenced
this pull request
Nov 3, 2025
Based on PR #8521 by @heyseth (Seth Miller) with the following enhancements: Original work by Seth Miller: - Auto-switch to imported mode after successful import - Backend returns imported mode slug in importModeWithRules() - UI switches to imported mode when found in customModes list - Comprehensive test coverage for auto-switch functionality Additional improvements: - Use architect mode as fallback when imported slug not yet present - Updated test to expect architect mode in fallback scenario - Prevents UI desync during state refresh race conditions Co-authored-by: Seth Miller <[email protected]>
|
This PR has been superseded by #9003 which incorporates your auto-switch functionality with an additional enhancement for the fallback behavior. #9003 includes:
Thank you for the solid foundation. |
github-project-automation
bot
moved this from PR [Needs Prelim Review]
to Done
in Roo Code Roadmap
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Related GitHub Issue
Closes: #8239
Description
This PR improves the user experience of importing custom modes by automatically switching to the newly imported mode upon a successful import. This provides immediate feedback to the user and removes the extra step of manually locating and selecting the mode from the list.
The implementation involves a small change to the import process:
importModeWithRules()function inCustomModesManager.tsnow returns theslugof the successfully imported mode.slugis passed from the message handler to theModesView.tsxcomponent in the UI.slugto programmatically set the active mode, providing an instantaneous update for the user.Test Procedure
Automated Tests
A new test suite,
ModesView.import-switch.spec.tsx, has been added to cover the new auto-switch functionality. These tests verify that the UI switches correctly on a successful import with a slug and does not switch on a failed import or if the slug is missing.Manual Testing Steps
Pre-Submission Checklist
Documentation Updates
Additional Notes
The message handler in
webviewMessageHandler.tswas updated to be backward compatible. If it receives a result from an older backend version without aslug, it will handle it gracefully without causing errors.Get in Touch
Discord:
@ocean.smithImportant
Automatically switch to a newly imported mode upon successful import, with backend and frontend updates to handle mode
slug.importModeWithRules()inCustomModesManager.tsnow returns theslugof the imported mode.webviewMessageHandler.tsupdated to passslugto UI on successful import.ModesView.tsxusesslugto switch to the imported mode automatically.slugis missing or import fails, keeping the current mode unchanged.ModesView.import-switch.spec.tsxto test auto-switch functionality on successful import.slugand remains unchanged on failure or missingslug.This description was created by
for a2792d1. You can customize this summary. It will automatically update as commits are pushed.